<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>登录界面</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> 
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
    <script>
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';	
			//使用表单提示
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'side';
			
			//定义表单
			var simple = new Ext.FormPanel({
			labelWidth: 75, 			
			baseCls: 'x-plain',
			defaults: {width: 150},
			defaultType: 'textfield',//默认字段类型
			 
			//定义表单元素
			items: [{
					fieldLabel: '用户名',
					name: 'emp.empLoginName',//元素名称
					allowBlank:false,//不允许为空
					blankText:'帐户不能为空'//错误提示内容
				},{
				    inputType:'password',
					fieldLabel: '密码',
					name: 'emp.empPassword',
					allowBlank:false,
					blankText:'密码不能为空'
				}
			],
			
			buttons: [{
				text: '登录',
				type: 'submit',
				//定义表单提交事件
				handler:function(){
				
			              if(simple.form.isValid()){//验证合法后使用加载进度条
						      Ext.MessageBox.show({
								   title: '请稍等',
								   msg: '正在加载...',
								   progressText: '',
								   width:300,
								   progress:true,
								   closable:false,
								   animEl: 'loding'
							   });
							   //控制进度速度
							   var f = function(v){
								 return function(){
											var i = v/11;
											Ext.MessageBox.updateProgress(i, '');
							            };
							   };
			
							   for(var i = 1; i < 13; i++){
									setTimeout(f(i), i*150);
							   }
			            
							  //提交到服务器操作
							  simple.form.doAction('submit',{
								 url:'employee/login.action',//文件路径
								 method:'POST',//提交方法post或get
								 //提交成功的回调函数
								 success:function(form,action){
										document.location='main.jsp';
								 },
								 //提交失败的回调函数
								 failure:function(form, action){
									//Ext.Msg.alert('提示', action.result.error);
									Ext.Msg.alert('提示', '用户名或密码错误');	
								 }
							  });
						   }                               						   
				}
			}]
			});    
			   //定义窗体
			   win = new Ext.Window({
					id:'win',
					title:'用户登陆',
					layout:'fit',	//之前提到的布局方式fit，自适应布局					
					width:300,
					height:150,
					plain:true,
			        bodyStyle:'padding:5px;',
					maximizable:false,//禁止最大化
					closeAction:'close',
					closable:false,//禁止关闭
					plain: true,
					resizable: false,
					buttonAlign:'center',
					items:simple//将表单作为窗体元素嵌套布局
				});
				win.show();//显示窗体
				simple.render("show");
			 });
</script>
</head>
<body>
<form action="servlet/Check" method="post">
</form>
<div id="show" style="width:300,height:150">
</div>
</body>
</html>
